import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, addToNum } from "../store/modules/counterStore";
import { fetchChannlList } from "../store/modules/channelStore";

function App () {
  const { count } = useSelector(state => state.counter);
  const { channelList } = useSelector(state => state.channel);
  
  const dispatch = useDispatch();
  // 使用useEffect来发送异步请求
  useEffect(() => {
    dispatch(fetchChannlList());
  }, [dispatch]);

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <h1>{count}</h1>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(addToNum(10))}>+10</button>

      <ul>
        {channelList.map((item, idx) => {
          return <li key={idx}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}

export default App;